import { resourceLibraryApi } from '@/api';
import { Descriptions } from 'antd';
import { useEffect, useState } from 'react';
import { ICourseWareDetail } from '../common/interface';

function PdfCourseWareDetail(props: { coursewareId: string; noStyle?: boolean }) {
  const { coursewareId } = props;
  const [videCourseWareDetail, setVideCourseWareDetail] = useState<ICourseWareDetail>();
  useEffect(() => {
    resourceLibraryApi.getCourseWareById({ coursewareId }).then((res) => {
      const data = res.data as ICourseWareDetail;
      try {
        data.pictextContent = JSON.parse(data.pictextContent || '').url;
      } catch (err) {
        console.log('--PdfCourseWareDetail--data.pictextContent--数据格式错误--');
        data.pictextContent = '';
      }
      setVideCourseWareDetail(data);
    });
  }, [coursewareId]);

  return (
    <div className="courseware_drawer_content">
      {videCourseWareDetail && (
        <>
          <Descriptions column={2} className="ym_descriptions">
            <Descriptions.Item label="课件名称" span={1}>
              {videCourseWareDetail.name}
            </Descriptions.Item>
            <Descriptions.Item label="创建时间" span={1}>
              {videCourseWareDetail.newCreateTime}
            </Descriptions.Item>
            <Descriptions.Item label="课件id" span={2}>
              {videCourseWareDetail.coursewareId}
            </Descriptions.Item>
          </Descriptions>
          <Descriptions column={2} className="ym_descriptions">
            <Descriptions.Item label="" span={2}>
              <img width="100%" src={videCourseWareDetail.pictextContent} alt="pdf文件预览图" />
            </Descriptions.Item>
          </Descriptions>
        </>
      )}
    </div>
  );
}
export default PdfCourseWareDetail;
